<template>
    <div class="container">
        <CardBox title="物种多样性"></CardBox>
        <div class="content-container">
            <div class="species-list">
                <div class="species-item"  v-for="item in categoryList" :key="item.id">
                    <div class="species-div"  @click="clickCategory(item)">
                        <img :src="item.icon" :alt="item.name" :class="item.id==selectItem?'species-img-active':'species-img'"/>
                        <img :src="item.icon2" :class="item.id==selectItem?'bird-active':'bird'"/>
                    </div>

                    <div class="species-label">{{item.name}}</div>
                    <div class="species-num"><span class="num">{{item.number}}</span><span class="unit">{{item.name=='昆虫'?'科':'种'}}</span></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import CardBox from '@/components/Global/CardBox.vue'
import {EventBus} from "../../utils/event-bus";
export default {
    components: {
        CardBox
    },
    name: 'Multi',
    data() {
        return {
            categoryList: [],
            selectItem:null
        }
    },
    mounted() {
        this.$api.species.getCategoryList().then(res => {
            this.categoryList = res.map(item => ({
                ...item,
                icon: require(`@/assets/img/${item.icon}`),
                icon2: require(`@/assets/img/b${item.icon}`)
            }))
            this.getLocationByCategotyId(res[1].id.toString());
            this.selectItem=res[1].id;
            setTimeout(() => {
                EventBus.$emit('select-category', res[1]);
            }, 500);
        });

    },
    methods:{
        clickCategory(item){
            EventBus.$emit('select-category', item);
            this.selectItem=item.id;
            this.getLocationByCategotyId(item.id.toString());
            if(item.name=="植物"){
                EventBus.$emit('setPlantTitle', "保护植物");
                this.$api.species.getRareList().then(res => {
                    setTimeout(() => {
                        EventBus.$emit('showRarePlant', res);
                    }, 500);
                });
            }else {
                EventBus.$emit('setPlantTitle', "物种统计");
                EventBus.$emit('showRarePlant', []);
            }
        },
        getLocationByCategotyId(id){
            this.$api.species.getLocationByCategotyId({id:id}).then(res => {
                const data = {
                    data: res.map(point => ({
                        lng: point.lon_gd,
                        lat: point.lat_gd,
                        count: point.number
                    })),
                    max: this.getMaxValue(res)
                };
                EventBus.$emit('sent-heat-map-data', data)
            });
        },
        // 获取最大值用于热力图渲染
        getMaxValue(points) {
            if (!points || points.length === 0) return 100;

            let max = 0;
            points.forEach(point => {
                if (point.number > max) max = point.number;
            });

            return max * 1.1; // 留一些余量
        }
    }
}
</script>

<style lang="scss" scoped>
    .container{
        margin-bottom: 20px;
    }
    .content-container{
        padding: 20px;
        height:388px;
    }
    .species-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 48px 40px;
    }
    .species-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0px); }
    }
    /*.png-image {*/
    /*    animation: float 3s ease-in-out infinite;*/
    /*}*/
    @keyframes pulse {
        0% { transform: scale(1) perspective(500px) translate3d(0,-10px,30px); opacity: 1; }
        50% { transform: scale(1.1) perspective(500px) translate3d(0,-10px,30px); opacity: 0.9; }
        100% { transform: scale(1) perspective(500px) translate3d(0,-10px,30px); opacity: 1; }
    }
    .species-div {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
        position: relative;
    }
    .species-div:hover .species-img{
        transform: perspective(500px) rotateX(75deg) translate3d(0,100px,0);
    }
    .species-div:hover .bird{
        opacity: 1;
        transform: perspective(500px) translate3d(0,0,5px);
    }
    .bird{
        position:absolute;
        width: 100px;
        height: 100px;
        opacity: 0;
        transition: 0.5s;
    }

    .bird-active{
        position:absolute;
        width: 100px;
        height: 100px;
        opacity: 1;
        transform: perspective(500px) translate3d(0,-10px,30px);
        animation: pulse 2s infinite;
    }
    .species-img {
        position:absolute;
        width: 100px;
        height: 100px;
        transition: 0.5s;
    }
    .species-img-active {
        position:absolute;
        width: 100px;
        height: 100px;
        transform: perspective(500px) rotateX(75deg) translate3d(0,100px,0);
    }
    /*.species-img-active {*/
    /*    position:absolute;*/
    /*    width: 100px;*/
    /*    height: 100px;*/
    /*    animation: pulse 2s infinite;*/
    /*}*/
    .species-label {
        font-size: 18px;
        color: #fff;
        margin-bottom: 4px;
    }
    .species-num {
        display: flex;
        align-items: flex-end;
        color: #ccc;
    }
    .species-num .num {
        font-size: 24px;
        font-weight: bold;
        color: #ccc;
        line-height: 1;
    }
    .species-num .unit {
        font-size: 14px;
        color: #ccc;
        margin-left: 2px;
        line-height: 1.2;
    }
</style>
